<template>
	<view>
		<view class="" style="padding: 10rpx 20rpx;color: #FFFFFF;">
			<view class="align back-blue">
				<view class="sizemax">668</view>
				<view class="sizemin">当前人数</view>
			</view>
			<view class="align" style="display: flex;">
				<view class="align back-green">
					<view class="sizemax">9</view>
					<view class="sizemin">本月入职</view>
				</view>
				<view class="align back-orange">
					<view class="sizemax">12</view>
					<view class="sizemin">本月离职</view>
				</view>
			</view>
			<view class="align back-red">
				<view class="sizemax">-668</view>
				<view class="sizemin">可用编制</view>
			</view>
		</view>

		<!-- 近6个月员工趋势 -->
		<view class="trend-con">
			<view class="trend">近6个月员工趋势</view>
		</view>
		<view class="qiun-charts">
			<canvas canvas-id="EmployeeTrends" id="EmployeeTrends" class="charts" disable-scroll=true @touchstart="touchLineA"
			 @touchmove="moveLineA" @touchend="touchEndLineA" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
		</view>

		<!-- 近6个月入离职趋势 -->
		<view class="trend-con">
			<view class="trend">近6个月入离职趋势</view>
		</view>
		<view class="qiun-charts">
			<canvas canvas-id="EntryAndExit" id="EntryAndExit" class="charts" disable-scroll=true @touchstart="touchLineA"
			 @touchmove="moveLineA" @touchend="touchEndLineA" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js'
	var _this;
	var EmployeeTrends = null;
	var EntryAndExit = null;

	export default {
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				staffData: {
					categories: ['2020-5', '2020-6', '2020-7', '2020-8', '2020-9', '2020-10'],
					series: [{
						name: '编制',
						data: [0, 0, 0, 0, 0, 0],
						color: '#DD524D',
					}, {
						name: '实际',
						data: [600, 605, 610, 615, 620, 625],
						color: '#2B85E4'
					}]
				},
				entryquitData: {
					categories: ['2020-5', '2020-6', '2020-7', '2020-8', '2020-9', '2020-10'],
					series: [{
						name: '入职',
						data: [6, 9, 10, 13, 14, 9],
						color: '#19BE6B'
					}, {
						name: '离职',
						data: [2, 1, 3, 5, 5, 13],
						color: '#F29110'
					}]
				}
			}
		},
		onLoad() {
			_this = this;
			this.cWidth = uni.upx2px(750)
			this.cHeight = uni.upx2px(500)
			this.getServerData();
		},
		methods: {
			getServerData() {
				_this.Employeetrends("EmployeeTrends", this.staffData)
				_this.Entryandexittrend("EntryAndExit", this.entryquitData)
			},
			// 员工趋势
			Employeetrends(canvasId, staffData) {
				EmployeeTrends = new uCharts({
					$this: _this,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					legend: {
						show: true,
						position: 'top',
					},
					dataLabel: false, // 隐藏数据点标签
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _this.pixelRatio,
					categories: staffData.categories,
					series: staffData.series,
					animation: true,
					enableScroll: true, // 开启图表拖拽功能
					xAxis: {
						type: 'grid',
						itemCount: 4, //x轴单屏显示数据的数量，默认为5个
						// scrollShow: true, //新增是否显示滚动条，默认false
						// scrollAlign: 'left', //滚动条初始位置
						scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF
						scrollColor: '#DEE7F7', //默认为 #A6A6A6
						// gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8
					},
					yAxis: {
						gridType: 'dash',
						// gridColor: '#CCCCCC',
						// dashLength: 8,
						splitNumber: 5,
						min: 10,
						max: 180,
						format: (val) => {
							return val.toFixed(0)
							// return val.toFixed(0) + '元'
						}
					},
					width: _this.cWidth * _this.pixelRatio,
					height: _this.cHeight * _this.pixelRatio,
					extra: {
						line: {
							type: 'curve' // 曲线curve--- 直线straight
						}
					}
				});
			},
			// 移动
			moveLineA(e) {
				if (e.target.id === "EmployeeTrends") {
					EmployeeTrends.scroll(e);
				} else if (e.target.id === "EntryAndExit") {
					EntryAndExit.scroll(e);
				}
			},

			// 触摸
			touchLineA(e) {
				if (e.target.id === "EmployeeTrends") {
					EmployeeTrends.scrollStart(e);
				} else if (e.target.id === "EntryAndExit") {
					EntryAndExit.scrollStart(e);
				}
			},

			touchEndLineA(e) {
				if (e.target.id === "EmployeeTrends") {
					EmployeeTrends.scrollEnd(e);
					EmployeeTrends.showToolTip(e, {
						format: function(item, category) {
							return category + ' ' + item.name + ':' + item.data
						}
					});
				} else if (e.target.id === "EntryAndExit") {
					EntryAndExit.scrollEnd(e);
					//下面是toolTip事件，如果滚动后不需要显示，可不填写
					EntryAndExit.showToolTip(e, {
						format: function(item, category) {
							return category + ' ' + item.name + ':' + item.data
						}
					});
				}
			},

			// 入离职趋势
			Entryandexittrend(canvasId, entryquitData) {
				EntryAndExit = new uCharts({
					$this: _this,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					title: {
						name: '1111'
					},
					legend: {
						show: true,
						position: 'top', // 图例位置
					},
					dataLabel: false, // 隐藏数据点标签
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _this.pixelRatio,
					categories: entryquitData.categories,
					series: entryquitData.series,
					animation: true,
					enableScroll: true, // 开启图表拖拽功能
					xAxis: {
						type: 'grid',
						itemCount: 4, // x轴单屏显示数据的数量，默认为5个
						// scrollShow: true, // 新增是否显示滚动条，默认false
						// scrollAlign: 'left', // 滚动条初始位置
						scrollBackgroundColor: '#F7F7FF', // 默认为 #EFEBEF
						scrollColor: '#DEE7F7', // 默认为 #A6A6A6
						// gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8
					},
					yAxis: {
						gridType: 'dash',
						// gridColor: '#CCCCCC',
						// dashLength: 8,
						splitNumber: 5,
						min: 10,
						max: 180,
						format: (val) => {
							return val.toFixed(0)
							// return val.toFixed(0) + '元'
						}
					},
					width: _this.cWidth * _this.pixelRatio,
					height: _this.cHeight * _this.pixelRatio,
					extra: {
						line: {
							type: 'straight' // 曲线curve--- 直线straight
						}
					}
				});

			},
		}
	}
</script>

<style lang="scss" scoped>
	// 居中
	.align {
		text-align: center;
		padding: 12rpx 0;
	}

	// 颜色
	.back-blue {
		background-color: #2B85E4;
	}

	.back-red {
		background-color: #DD524D;
	}

	.back-green {
		flex: 1;
		background-color: #19BE6B;
	}

	.back-orange {
		flex: 1;
		background-color: #F29100;
	}

	// 字体大小
	.sizemax {
		font-size: 46rpx;
	}

	.sizemin {
		font-size: 24rpx;
	}
</style>
